<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta charset="utf-8">
        <script type="text/javascript" src="${rc.contextPath}/javascripts/jquery.2.1.1.min.js"></script>
        <link rel="stylesheet" href="${rc.contextPath}/stylesheets/bootstrap.min.css">
	    <link rel="stylesheet" href="${rc.contextPath}/stylesheets/bootstrap-theme.min.css">
	    <script type="text/javascript" src="${rc.contextPath}/javascripts/bootstrap.min.js"></script>
		<script type="text/javascript" src="${rc.contextPath}/javascripts/echarts.js"></script>
		<script type="text/javascript" src="${rc.contextPath}/javascripts/china.js"></script>
        <script src="${rc.contextPath}/assets/js/d3.v3.min.js"></script>
    </head>
    <script type="text/javascript">
        d3.select(self.frameElement).style("height", "1200px");
    var geoCoordMap = {
            '西藏':[91.11,29.97],
            '广西':[109.4,24.33],
            '四川':[103.06,30.67],
            '重庆':[106.54,29.59],
            '北京':[116.46,39.92],
            '天津':[117.4,39.4],
            '新疆':[86.06,41.68],
            '青海':[98,36],
            '甘肃':[103.73,36.03],
            '云南':[102.52,24.35],
            '贵州':[106.71,26.57],
            '内蒙古':[111.65,40.82],
            '黑龙江':[128,47],
            '吉林':[126.57,43.87],
            '辽宁':[122.85,41.12],
            '河北':[115.48,38.85],
            '安徽':[117.27,31.86],
            '海南':[109.511909,19],
            '广东':[113.23,23.16],
            '湖南':[112,28],
            '陕西':[108.95,34.27],
            '福建':[118,25.5],
            '河南':[113.65,34],
            '宁夏':[106.27,37.5],
            '湖北':[113,31],
            '山东':[117,36.65],
            '江西':[115.89,28],
            '江苏':[119.9,32.49],
            '浙江':[120.19,29],
            '台湾':[120.55,23.3],
            '山西':[112.53,37.87],
            '上海':[121.48,31.22],
        };  
    var convertData = function (data) {
        var res = [];
        for (var i = 0; i < data.length; i++) {
            var geoCoord = geoCoordMap[data[i].name];
            if (geoCoord) {
                res.push({
                    name: data[i].name,
                    value: geoCoord.concat(data[i].value)
                });
            }
        }
        return res;
    };
    
    
    function ajaxData(condition){
    	var date=new Date().toLocaleTimeString();
    	var d=date.indexOf("00:00");
    	if(d>0 || condition=='y'){
    		$.ajax({
     		   url: "${rc.contextPath}/orderCount/ajaxData",
     		   success:function(data){
     			  option = {
     					 	backgroundColor: '#404a59',
     					    title: {
     					        text: '各省份前一小时内订单统计',
     					        left: 'center',
     					      	textStyle: {
     					            color: '#fff'
     					        }
     					    },
     					   tooltip: {
    					        trigger: 'item',
    					        formatter:function(params){
    					        	if(params.value[2]!=undefined){
    					        		 return params.name+" : "+params.value[2];
    					        		console.log(params.value[2]);
    					        	}else{
    					        		return params.name+" : "+params.value;
    					        	}
    					        }
    					    },
     					    legend: {
     					        orient: 'vertical',
     					        left: 'left',
     					        data:['订单数量']
     					    },
     					   geo: {
     					        map: 'china',
     					        label: {
     					            emphasis: {
     					                show: false
     					            }
     					        },
     					        roam: true,
     					       tooltip: {
        					        trigger: 'item',
        					    },
     					        itemStyle: {
     					            normal: {
     					                areaColor: '#323c48',
     					                borderColor: '#111'
     					            },
     					            emphasis: {
     					                areaColor: '#2a333d'
     					            }
     					        }
     					    },
     					    series: [
     					        {
     					            name: '订单数',
     					            type: 'map',
     					            mapType: 'china',
     					            tooltip: {
     	     					        trigger: 'item',
     	     					    },
     					            roam: true,
     					            label: {
     					                 normal: {
     					                    show: true,
     					                    textStyle: {
     		     					            color: '#fff'
     		     					        }
     					                }, 
     					                emphasis: {
     					                    show: true
     					                }
     					            },
     					            data:data,
     					          	 itemStyle: {
        					             normal: {
        					                areaColor: '#323c48',
        					                borderColor: '#111'
        					            }/* , 
        					            emphasis: {
        					                areaColor: '#2a333d'
        					            } */
        					        }
     					        },
     					       {
     					            name: 'Top 1',
     					            type: 'effectScatter',
     					            coordinateSystem: 'geo',
     					            data: convertData(data.sort(function (a, b) {
     					                return b.value - a.value;
     					            }).slice(0, 1)),
     					            symbolSize: function (val) {
     					                return val[2] / 10;
     					            },
     					            showEffectOn: 'render',
     					            rippleEffect: {
     					                brushType: 'stroke'
     					            },
     					            hoverAnimation: false,
     					            label: {
     					                normal: {
     					                    formatter: 'Top1'+'\r\n'+'\r\n',
     					                    position: 'right',
     					                    show: true
     					                },
     					                emphasis: {
     					            	   formatter: '',
	   					                    position: 'left',
	   					                    show: false
    					                }
     					            },
     					           itemStyle: {
     					                normal: {
     					                    color: '#f4e925',
     					                    shadowBlur: 10,
     					                    shadowColor: '#333'
     					                }
     					            },
     					            zlevel: 1
     					        },
     					       {
     					            name: 'Top 3',
     					            type: 'effectScatter',
     					            coordinateSystem: 'geo',
     					            data: convertData(data.sort(function (a, b) {
     					                return b.value - a.value;
     					            }).slice(2, 3)),
     					            symbolSize: function (val) {
     					                return val[2] / 10;
     					            },
     					            showEffectOn: 'render',
     					            rippleEffect: {
     					                brushType: 'stroke'
     					            },
     					            hoverAnimation: true,
     					            label: {
     					                normal: {
     					                    formatter: 'Top3'+'\r\n'+'\r\n',
     					                    position: 'right',
     					                    show: true
     					                }
     					            },
     					           itemStyle: {
     					                normal: {
     					                    color: '#f4e925',
     					                    shadowBlur: 10,
     					                    shadowColor: '#333'
     					                }
     					            },
     					            zlevel: 1
     					        },
     					       {
     					            name: 'Top 2',
     					            type: 'effectScatter',
     					            coordinateSystem: 'geo',
     					            data: convertData(data.sort(function (a, b) {
     					                return b.value - a.value;
     					            }).slice(1, 2)),
     					            symbolSize: function (val) {
     					                return val[2] / 10;
     					            },
     					            showEffectOn: 'render',
     					            rippleEffect: {
     					                brushType: 'stroke'
     					            },
     					            hoverAnimation: true,
     					            label: {
     					                normal: {
     					                    formatter: 'Top2'+'\r\n'+'\r\n',
     					                    position: 'right',
     					                    show: true
     					                }
     					            },
     					           itemStyle: {
     					                normal: {
     					                    color: '#f4e925',
     					                    shadowBlur: 10,
     					                    shadowColor: '#333'
     					                }
     					            },
     					            zlevel: 1
     					        }
     					    
     					    ]
     					};
     				  var myChart = echarts.init(document.getElementById('main'));
     	    	  	  myChart.setOption(option);
     	    	  
     		   }
     		   
     		 });		
    		
    	}
    	 	 
    }
    
           $(function(){
        	   ajaxData("y");
        	   setInterval("ajaxData('n')",1000);
           });
    
    </script>
   
    <body>
   <div id="main" style="width:800px;height:600px;margin:0 auto;"></div>
   </body>
</html>